<template>
  <view class="template-fans">
    
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
        <view class="custom-nav__back" @tap.stop="goBack">
          <view class="tn-icon-left"></view>
        </view>
        <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-center tn-color-black">
            <text class="tn-text-lg tn-padding-left">圈子</text>
            <text class="tn-text-xl tn-padding-left-sm tn-icon-group-circle"></text>  
          </view>
        </view>
      </view>
    </tn-nav-bar>
    
    
    <view class="order--wrap" :style="{top: vuex_custom_bar_height + 'px'}">
      <!-- 顶部标签 -->
      <tn-tabs-swiper 
        class="order__tabs" 
        ref="tabs" :list="tablist" 
        :current="tabsIndex" 
        :isScroll="false" 
        :bold="true" activeColor="#080808" inactiveColor="#AAAAAA" @change="tabsChange">
      </tn-tabs-swiper>
      
      <!-- 标签内容 -->
      <swiper 
        class="order__swiper" 
        :style="{top: `${swiperTop}px`, height: `${swiperHeight}px`}" 
        :current="swiperIndex" 
        @transition="swiperTransition" 
        @animationfinish="swiperAnimationFinish">
        <swiper-item class="order__swiper__item">
          <scroll-view 
            :style="{height: `${swiperHeight}px`}" 
            :refresher-threshold="100"
            :refresher-enabled="true"
            :enable-back-to-top="true"
            :refresher-triggered="triggered"
             @refresherrefresh="refreshList" 
             @refresherrestore="onRestore" 
            scroll-with-animation
            @scrolltolower="getList()"
            scroll-y>
            <view v-for="(item,index) in list" 
            :key="index" class="order__item">
              <view class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
                <view class="order__item__content__image">
                  <image 
                    :src="item.avatar" 
                    mode="scaleToFill">
                  </image>
                </view>
                <view class="order__item__content__title">
                  <view class="order_item_nickname">{{item.nickname}}</view>
                  <view class="order__item__operation tn-flex tn-flex-direction-row
                   tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
                    <view class="order__item__operation__right tn-flex 
                    tn-flex-direction-row tn-flex-nowrap tn-flex-col-center 
                    tn-flex-row-right">
                      <view v-if="unfocus[item.userId]" class="order__item__operation__right__button">
                        <tn-button :plain="true" shape="round" 
                        @click="postFollow(
                          item.userId, 1
                        )"
                        fontColor="tn-color-red" backgroundColor="tn-bg-red" 
                        :fontSize="24" height="auto" width="100%" padding="10rpx 18rpx">关注</tn-button>
                      </view>
                      <view v-else class="order__item__operation__right__button">
                        <tn-button :plain="true" shape="round" 
                        @click="postFollow(
                          item.userId, 0
                        )"
                        fontColor="#080808" backgroundColor="#080808" 
                        :fontSize="24" height="auto" width="100%" padding="10rpx 18rpx">取消关注</tn-button>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="tn-padding-bottom"></view>
          </scroll-view>
        </swiper-item>
        
        <swiper-item class="order__swiper__item">
          <scroll-view
            :style="{height: `${swiperHeight}px`}" 
            :refresher-threshold="100"
            :refresher-enabled="true"
            :enable-back-to-top="true"
            :refresher-triggered="triggered"
             @refresherrefresh="refreshList" 
             @refresherrestore="onRestore" 
            scroll-with-animation
            @scrolltolower="getList()"
            scroll-y>
            <view v-for="(item,index) in list" 
            :key="index" class="order__item">
              <view class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
                <view class="order__item__content__image">
                  <image 
                    :src="item.avatar" 
                    mode="scaleToFill">
                  </image>
                </view>
                <view class="order__item__content__title">
                  <view class="order_item_nickname">{{item.nickname}}</view>
                  <view class="order__item__operation tn-flex tn-flex-direction-row
                   tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
                    <view class="order__item__operation__right tn-flex 
                    tn-flex-direction-row tn-flex-nowrap tn-flex-col-center 
                    tn-flex-row-right">
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="tn-padding-bottom"></view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
  import templatePageMixin from '@/libs/mixin/template_page_mixin.js'
  import {
  	getFriends, postFollowUser
  } from '@/libs/js/home.js'
  export default {
    name: 'TemplateMessage',
    mixins: [templatePageMixin],
    data() {
      return {
        tablist: [
          {name: '关注'},
          {name: '粉丝'}
        ],
        listQuery: {
          limit: 20,
          page: 1
        },
        userid: undefined,
        triggered: false,
        loading: false,
        loaded: false,
        list: [],
        unfocus: {},
        tabsIndex: 0,
        swiperIndex: 0,
        swiperTop: 0,
        swiperHeight: 0
      }
    },
    onLoad(options) {
      this.userid = options.userid;
      if(+options.tabindex === 0){
        this.listQuery.userId = undefined;
        this.listQuery.followId = options.userid;
      }else{
        this.listQuery.followId = undefined;
        this.listQuery.userId = options.userid;
      }
      this.tabsIndex = +options.tabindex;
      this.swiperIndex = +options.tabindex;
      this.getList();
    },
    onReady() {
      this.$nextTick(() => {
        this.updateSwiperInfo()
      })
    },
    methods: {
      // 计算可滑动区域的高度信息
      updateSwiperInfo() {
        // 获取可滑动菜单的信息
        this._tGetRect('.order__tabs').then(res => {
          if (!res) {
            setTimeout(() => {
              this.updateSwiperInfo()
            }, 10)
            return
          }
          const systemInfo = uni.getSystemInfoSync()
          this.swiperTop = res.bottom - this.vuex_custom_bar_height
          this.swiperHeight = systemInfo.safeArea.height - res.bottom + systemInfo.statusBarHeight
        })
      },
      // 标签栏值发生改变
      tabsChange(index) {
        this.swiperIndex = index
        this.tabsIndex = index
        this.list = [];
        this.listQuery.page = 1;
        if(+index === 0){
          this.listQuery.userId = undefined;
          this.listQuery.followId = this.userid;
        }else{
          this.listQuery.followId = undefined;
          this.listQuery.userId = this.userid;
        }
        this.loading = false;
        this.loaded = false;
        this.triggered = false;
        console.log(this.listQuery);
        this.getList();
      },
      // swiper-item位置发生改变
      swiperTransition(event) {
        this.$refs.tabs.setDx(event.detail.dx)
      },
      // swiper动画结束
      swiperAnimationFinish(event) {
        const current = event.detail.current
        this.$refs.tabs.setFinishCurrent(current)
        this.swiperIndex = current
        this.tabsIndex = current
      },
      onRestore() {
        this.triggered = false; 
      },
      refreshList() {
        if (this.loading) return;
        this.loaded = false;
        this.triggered = true;
        console.log('refresh')
        this.listQuery.page = 1;
        this.getList();
        setTimeout(() => {
          this.triggered = false;
        }, 3000)
      },
      getList() {
        if(this.loading || this.loaded){
          return;
        }
        this.loading = true;
        getFriends(this.listQuery).then(res => {
          this.triggered = false;
          if (res.code === 0 && res.data && res.data.list && res.data.list.length) {
          	console.log(res);
            const t = res.data.list;
            if(this.listQuery.page == 1){
              this.list = t;
            }else{
              this.list = this.list.concat(t);
            }
          
            if(t.length < this.listQuery.limit){
              this.loaded = true;
            }
            console.log(this.list);
          }else{
            this.loaded = true;
          }
          this.listQuery.page++;
          this.loading = false;
        });
      },
      postFollow(userId, action){
        postFollowUser({
          userId,
          action
        }).then(res => {
          console.log(res);
          if(+action === 0){
            console.log(1)
            this.$set(this.unfocus, userId, true)
          }else{
            this.$set(this.unfocus, userId, false)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
    &:before {
      content: " ";
      width: 1rpx;
      height: 110%;
      position: absolute;
      top: 22.5%;
      left: 0;
      right: 0;
      margin: auto;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      opacity: 0.7;
      background-color: #FFFFFF;
    }
  }
  .template-fans {
  }
  
  /* 自定义导航栏内容 start */
  .custom-nav {
    height: 100%;
    
    &__back {
      margin: auto 5rpx;
      font-size: 40rpx;
      margin-right: 10rpx;
      margin-left: 30rpx;
      flex-basis: 5%;
    }
    
    &__search {
      flex-basis: 71%;
      width: 100%;
      height: 100%;
      
      &__box {
        width: 100%;
        height: 70%;
        padding: 10rpx 0;
        margin: 0 30rpx;
        border-radius: 60rpx 60rpx 60rpx 0;
        font-size: 24rpx;
        // background-color: rgba(255,255,255,0.1);
      }
      
      &__icon {
        padding-right: 10rpx;
        margin-left: 20rpx;
        font-size: 30rpx;
      }
      
      &__text {
      }
    }
  }
  /* 自定义导航栏内容 end */
  
  .order {
    &--wrap {
      position: fixed;
      left: 0;
      right: 0;
      width: 100%;
      background-color: inherit;
    }
    
    /* 导航栏 start */
    &__tabs {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background-color: inherit;
    }
    /* 导航栏 end */
    
    /* swiper start */
    &__swiper {
      position: absolute;
      left: 0;
      right: 0;
      width: 100%;
      background-color: inherit;
      padding: 0 16rpx;
    }
    /* swiper end */
    
    /* 订单内容 start */
    &__item {
      margin: 20rpx;
      padding: 36rpx 26rpx;
      background-color: #FFFFFF;
      border-radius: 18rpx;
      background-color: #FFFFFF;
      box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
      
      &:first-child {
        margin-top: 40rpx;
      }
      
      &:last-child {
        margin-bottom: 0;
      }
      
      /* 头部 start */
      &__head {
        
        &__title {
          font-weight: bold;
          line-height: normal;
          
          &--right-icon {
            font-size: 24rpx;
            margin-left: 8rpx;
          }
        }
        
        &__status {
          font-size: 28rpx;
          color: #AAAAAA;
        }
      }
      /* 头部 end */
      
      /* 内容 start */
      &__content {
        
        &__image {
          margin-right: 20rpx;
          
          image {
            width: 140rpx;
            height: 140rpx;
            border-radius: 140rpx;
          }
        }
        
        &__title {
          padding-right: 0rpx;
          display: -webkit-box;
          overflow: hidden;
          white-space: normal !important;
          text-overflow: ellipsis;
          word-wrap: break-word;
          flex: 1 0 0;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        
        &__info {
          
          &__price {
            &--unit {
              font-size: 20rpx;
            }
            &__value--integer, &__value--decimal {
              font-weight: bold;
            }
            &__value--decimal {
              font-size: 20rpx;
            }
          }
          
          &__count {
            color: #AAAAAA;
            font-size: 24rpx;
          }
        }
      }
      /* 内容 end */
      
      /* 操作按钮 start */
      &__operation {
        margin-top: 30rpx;
        
        &__right {
          &__button {
            width: 140rpx;
            margin-left: 10rpx;
            .tn-btn{
              width: 100%;
            }
          }
        }
      }
      /* 操作按钮 end */
    }
    /* 订单内容 end */
  }
  
  
</style>
